<template>
<div style="position: fixed; top: 0; left: 0; margin: 20px;">
    <router-link
      to="/found"
      class="custom-link"
    >
      <el-button
        color="#626aef"
        :dark="isDark"
      >返回首页</el-button>
    </router-link>
  </div>
  <div class="post-detail-container">
  <div class="post-detail">
    <!-- 左侧图片 -->
    <div class="image-container">
      <img src="../assets/erji.png">
    </div>
    <!-- 右侧帖子详情 -->
    <div class="details-container">
      <div class="user-id">{{info.username}}</div>

      <el-divider content-position="left">标题</el-divider>
      <h1 class="post-title">{{ info.title }}</h1>

      <el-divider content-position="left">详情</el-divider>
      <h3 class="post-description">{{ info.FoundInfo }}</h3>

      <el-divider content-position="left">地点</el-divider>
      <h3 class="location">{{ info.FoundAdd }}</h3>

      <el-divider content-position="left">call me</el-divider>
      <div class="contact">{{ info.Tel }}</div>
      <!-- 评论区
      <div class="comments-section">
        <h2>评论区</h2>
        
      </div> -->
    </div>
  </div>
  </div>
</template>

<script>
import Bmob from "hydrogen-js-sdk";

export default {
  data() {
    return {
      info: {} ,// 存储从数据库获取的信息
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      const objectId = this.$route.params.objectId;
      const query = Bmob.Query("found");
      query.get(objectId).then(res => {
        this.info = res;
      });
    },
  }
};
</script>
<style scoped>
.post-detail-container {
  min-width: 800px;
  margin: 90px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-detail {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
}

.image-container {
  flex: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  max-width: 100%;
  height: auto;
}

.details-container {
  flex: 6;
  padding: 20px;
  text-align: left; 
}

.post-title {
  font-size: 24px;
}

.post-description {
  margin-top: 10px;
}

.location, .contact {
  margin-top: 10px;
}

/* .comments-section {
  width: 100%;
  max-width: 1200px;
  margin-top: 20px;
} */

.comment {
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.comment-user {
  font-weight: bold;
}

.comment-content {
  margin-top: 5px;
}

.divider {
  margin-top: 30px;
  border-top: 2px solid #ccc;
}
</style>